<?php
/**
 * 实现的功能 将 
 * code 读取 信息
 *  一个选择栏
 * */


?>

<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">ITable-表格填写</h1>
		</header>
		<div id="tableApp" class="mui-content">
			<div class="mui-content-padded">
				<p>将该页面分享出去即可给他人填写。</p>
				选择 你的 {{keyWord}}
				<select v-model="keyWordValue" class="mui-btn mui-btn-block">
					<option v-for="value in chooselist" >{{value}}</option>
				</select>
			</div>
			<ul class="mui-table-view">
				
				<li  v-for="(value,key,index) in showData " :key="key"  class="mui-table-view-cell mui-media">
					<template v-if="index==0">
					<a href="javascript:;">
					<!--<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">-->
					<div class="mui-media-body">
						<!--<p v-for=" (value,key) showDatalist.data" :key="key">
							{{value}}--{key}--{{id}}--{{data}}
						</p>-->
						你的{{keyWord}}是:{{value}}
						
						<!--<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>-->
						<p class='mui-ellipsis'>检查你的信息，根据情况修改</p>
					</div>
					</a>
						
					</template>
					
					<template v-if="index!=0">
					{{index+":"+key}} 
					
					<a href="javascript:;">
						<!--<div class="mui-media-body">-->
							<!--{{'<input type=\"input\"\>'+value}}-->
							<!--{{"<textarea class=\"inputTarger_"+index+"\"  v-on:input=\"inputFunc\" id=\"textarea\" rows=\"3\" >"+value+"</textarea>"}}-->
							<!--<textarea  id="textarea" rows="3" v-on:input="inputFunc()">{{value}}</textarea>-->
							<!---->
							<!--<p class='mui-ellipsis'></p>-->
						<!--</div>-->
						<div class="mui-media-body">
							<p class="mui-ellipsis mui-pull-l">{{value}} </p>
							<button type="button" @click="updataMsg(key)" class="mui-ellipsis mui-pull-right mui-btn mui-btn-primary mui-btn-outlined">
								修改</button>
						</div>
					</a>
					</template>
				</li>
				<li>
					<div class="mui-media-body">
						<button  v-on:click="updataDo()">提交</button>
						<!--<input type="submit" value="type=submit" />-->
						</div>
				</li>
			</ul>
			
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript" src="js/vue-resource.min.js" ></script>
		<script>
			
			var tableApp=new Vue({
				el:"#tableApp",
				data:{
					keyWord:'id',
					code:'<?php echo @$_GET['code']?>',
					keyWordValue:'',
					resbody:{},
					chooselist:[],//['a','b','c'],
					showDatalist:'',
					showData:{},
					changeData:{}
				},
				methods:{
					showTable:function(uid,len){
//						for()
					var that=this;
//					alert("aa");
					for(var i=0;i<len;i++){
						if(that.showDatalist[i][that.keyWord]==uid){
							that.showData=that.showDatalist[i];
//							console.log(that.showDatalist[i]);
							break;
						}
					}
					
					
//					alert(that.showDatalist.uid);
					},
					getTable:function(){
						var that=this;
						if(that.code==''){
							return ;
						}
						this.$http.get('API.php?type=gettable',{
							params:{
								code:that.code
							}
						}).then(function(res){
							that.resbody=res.body;
							that.chooselist=res.body.tableJson.chooselist;
							that.showDatalist=res.body.tableJson.dataList;
							that.keyWord=res.body.tableJson.choosename;
//							console.log(that.resbody);
						});
					},
					updataDo:function(){
						var that=this;
//						this.changeData;
						this.changeData={
								listRow:{
									title:that.resbody.tableJson.tableJson,
									rowlist:that.resbody.tableJson.titleList,
									rowlen:that.resbody.tableJson.titleList.length,
									code:that.code
								},
								listData:that.showData
							};
//						console.log(that.changeData);
						this.$http.post("API.php?type=settable&do=change",{
								list:that.changeData,
								code:that.code
						},{emulateJSON:true}).then(function(res){
							console.log(res);
							mui.toast('提交成功！');
						},function(res){
							console.log(res)
							mui.toast('提交失败！');
	
						})
//						this.$http.get('itable/setTable.php',{
//							list:that.changeData
//						},,{emulateJSON:true}).then(function(res){
//							console.log(res.body);
//						})

					},
					inputFunc:function(e){
						console.log(e.target);
						console.log("input"+e.target.value);
//						console.log(e);
//						console.log(document.getElementsByTagName('textarea'));
//						console.log(key)
//						var x=document.getElementsByName()
					},
					updataMsg:function(index){
						var that= this;
						var btnArray = ['取消', '确定'];
						mui.prompt('请输入修改的值：', '输入信息', '修改框', btnArray, function(e) {
							if (e.index == 1) {
		//						info.innerText = '谢谢你的评语：' + e.value;
//								console.log(e.index+e.value)
								that.showData[index]=e.value;
							} else {
		//						
							}
						});

						
					}
					
//					test:function(tests){
//						alert(tests);
//					}		
				}
			});
			tableApp.getTable();
			tableApp.$watch("keyWordValue",function(nval,oval){
//				alert(nval+" "+oval);
//				this.test(nval);
				this.showTable(nval,this.showDatalist.length);
			})
//			tableApp.$watch('inputFunc',function(nVal,oVal){
//				console.log(nval+"--"+oval);
//			});
		</script>
	</body>

</html>
